<template>
    <div class="banner">
        <el-skeleton :loading="loading" animated>
            <template #template>
                <div style="display:inline-block;width:30%">
                    <el-skeleton-item variant="image" style="height:250px;" />
                </div>
                <div style="display:inline-block;width:40%">
                    <el-skeleton-item variant="image" style="height:300px" />
                </div>
                <div style="display:inline-block;width:30%">
                    <el-skeleton-item variant="image" style="height:250px" />
                </div>
            </template>
            <template #default>
                <!-- 解决走马灯第一张空白的bug -->
                <el-carousel trigger="click" type="card" v-if="bannerList[0]">
                    <el-carousel-item v-for="item of bannerList" :key="item.targetId">
                        <el-image :src="item.imageUrl" class="banner_img">
                        </el-image>
                    </el-carousel-item>
                </el-carousel>
            </template>
        </el-skeleton>
    </div>
</template>

<script>
import { getBanner } from '@apis/http'
import { ElNotification, ElMessage } from 'element-plus'

export default {
    data() {
        return {
            bannerList: [],
            loading: '',
        };
    },
    created: function () {
        getBanner().then(res => {
            // console.log(JSON.stringify(res.banners));
            if (res.code === 200) {
                this.bannerList = res.banners
                this.loading = false
            } else {
                ElNotification({
                    type: 'error',
                    title: '提示',
                    message: '接口请求错误，请查看getBanner()接口',
                })
            }
        }).catch(res => {
            // console.log("888=" + JSON.stringify(res));
            // ElNotification({
            //     type: 'error',
            //     duration: 0,
            //     title: '提示',
            //     message: res.message + ",url=" + res.config.url,
            // })

            ElMessage({
                message: '演示数据',
            })

            this.loading = false
            this.bannerList = [{
                "imageUrl": "http://p1.music.126.net/j1BqROtoInAChHoo8_ZN1Q==/109951167885418605.jpg",
                "targetId": 1807799505,
                "adid": null,
                "targetType": 1,
                "titleColor": "red",
                "typeTitle": "热歌推荐",
                "url": null,
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "1807799505",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5590967.1970321566.null"
            },
            {
                "imageUrl": "http://p1.music.126.net/vvtTsVZglema8o-Ie31XgQ==/109951167885416995.jpg",
                "targetId": 0,
                "adid": null,
                "targetType": 3000,
                "titleColor": "blue",
                "typeTitle": "独家策划",
                "url": "https://music.163.com/m/at/63218997ca6bc87dfc91236e",
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "0",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5639962.1970473249.null"
            },
            {
                "imageUrl": "http://p1.music.126.net/7jOSbTLe9aIir5XoCFe3Lg==/109951167885428224.jpg",
                "targetId": 0,
                "adid": null,
                "targetType": 3000,
                "titleColor": "blue",
                "typeTitle": "数字单曲",
                "url": "https://music.163.com/store/newalbum/detail?id=150003516",
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "0",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5601967.1970531874.null"
            },
            {
                "imageUrl": "http://p1.music.126.net/EX2lkPutiPzox07ruAE5AQ==/109951167885435626.jpg",
                "targetId": 1981847206,
                "adid": null,
                "targetType": 1,
                "titleColor": "red",
                "typeTitle": "新歌首发",
                "url": null,
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "1981847206",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5597967.1970326339.null"
            },
            {
                "imageUrl": "http://p1.music.126.net/zdhE1dxZ1KZU-BSn6YSiNw==/109951167885435351.jpg",
                "targetId": 1970568707,
                "adid": null,
                "targetType": 1,
                "titleColor": "red",
                "typeTitle": "新歌首发",
                "url": null,
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "1970568707",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5575977.1970502204.null"
            },
            {
                "imageUrl": "http://p1.music.126.net/wX_g0HklCaaZ2FmO9v42zg==/109951167885448506.jpg",
                "targetId": 151696682,
                "adid": null,
                "targetType": 10,
                "titleColor": "red",
                "typeTitle": "新碟首发",
                "url": null,
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "151696682",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5580967.1970531040.null"
            },
            {
                "imageUrl": "http://p1.music.126.net/udKyeE34hZwcbWarMDA3zA==/109951167885442414.jpg",
                "targetId": 1981056341,
                "adid": null,
                "targetType": 1,
                "titleColor": "red",
                "typeTitle": "新歌首发",
                "url": null,
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "1981056341",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5627969.1970442659.null"
            },
            {
                "imageUrl": "http://p1.music.126.net/f2Lx1gZxtD8fgto2g9uUjA==/109951167886153446.jpg",
                "targetId": 1981485534,
                "adid": null,
                "targetType": 1,
                "titleColor": "red",
                "typeTitle": "新歌首发",
                "url": null,
                "exclusive": false,
                "monitorImpress": null,
                "monitorClick": null,
                "monitorType": null,
                "monitorImpressList": null,
                "monitorClickList": null,
                "monitorBlackList": null,
                "extMonitor": null,
                "extMonitorInfo": null,
                "adSource": null,
                "adLocation": null,
                "adDispatchJson": null,
                "encodeId": "1981485534",
                "program": null,
                "event": null,
                "video": null,
                "song": null,
                "scm": "1.music-homepage.homepage_banner_force.banner.5574976.1970419524.null"
            }];
        })
    },
}
</script>

<style scoped>
.banner {
    padding-bottom: 30px;
    padding: 30px 0;
}

.banner_img {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
  